<template>
  <div class="crawl-records-container">
    <!-- 查询表单 -->
    <el-card class="search-card">
      <el-form :inline="true" :model="queryParams" class="search-form">
        <el-form-item label="关键词">
          <el-input
              v-model="queryParams.keyword"
              placeholder="请输入标题关键词"
              clearable
              @clear="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 爬取记录列表 -->
    <el-card class="table-card">
      <el-table
          :data="recordList"
          border
          style="width: 100%"
          v-loading="loading"
          @row-click="handleRowClick"
      >
        <el-table-column prop="id" label="ID" width="80" align="center" />
        <el-table-column prop="title" label="标题" min-width="100" show-overflow-tooltip />
        <el-table-column prop="imageSum" label="图片数量" width="100" align="center" />
        <el-table-column prop="createdTime" label="创建时间" width="180" align="center" />
        <el-table-column label="操作" width="220" align="center">
          <template #default="{ row }">
            <el-button
                type="primary"
                size="small"
                @click.stop="showDetail(row.id)"
            >
              详情
            </el-button>
            <el-button
                type="danger"
                size="small"
                @click.stop="deleteRecord(row.id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
            v-model:current-page="queryParams.page"
            v-model:page-size="queryParams.size"
            :page-sizes="[10, 20, 50, 100]"
            :total="total"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleQuery"
            @current-change="handleQuery"
        />
      </div>
    </el-card>

    <!-- 详情弹窗 -->
    <el-dialog
        v-model="detailVisible"
        :title="`爬取详情 - ${currentRecord?.title || ''}`"
        width="80%"
        top="5vh"
    >
      <div class="detail-container">
        <!-- 修改为图片网格布局 -->
        <div class="image-grid">
          <div v-for="(item, index) in detailList" :key="index" class="image-item">
            <el-image
                style="width: 158px; height: 236px"
                :src="item.src"
                :preview-src-list="detailList.map(i => i.src)"
                :initial-index="index"
                fit="cover"
                hide-on-click-modal
            />
            <div class="image-meta">
              <div><strong>序号:</strong> {{ item.imageIndex }}</div>
              <div><strong>标题:</strong> {{ item.title }}</div>
              <div><strong>地址:</strong> <el-link type="primary" :href="item.src" target="_blank">查看原图</el-link></div>
              <div><strong>时间:</strong> {{ item.createdTime }}</div>
            </div>
          </div>
        </div>

        <!-- 详情分页 -->
        <div class="pagination">
          <el-pagination
              v-model:current-page="detailParams.page"
              v-model:page-size="detailParams.size"
              :page-sizes="[10, 20, 50, 100]"
              :total="detailTotal"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="fetchDetail"
              @current-change="fetchDetail"
          />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

import { getCrawlRecords, getCrawlRecordDetail,deleteImageRecordSrcUrl } from '@/api/imageSrcUrl'

// 主列表数据
const queryParams = ref({
  page: 1,
  size: 10,
  keyword: ''
})
const recordList = ref([])
const total = ref(0)
const loading = ref(false)

// 详情数据
const detailVisible = ref(false)
const currentRecord = ref(null)
const detailParams = ref({
  page: 1,
  size: 10
})
const detailList = ref([])
const detailTotal = ref(0)
const detailLoading = ref(false)

// 获取爬取记录列表
const fetchRecords = async () => {
  try {
    loading.value = true
    console.log('当前页码：', queryParams.value)
    const params = {
      page: queryParams.value.page,
      size: queryParams.value.size,
      keyword: queryParams.value.keyword || undefined // 后端接口中keyword是可选的
    }
    console.log('当前页码：', params)
    const res = await getCrawlRecords(params)
    recordList.value = res.list
    total.value = res.total
  } catch (error) {
    ElMessage.error('获取爬取记录失败: ' + error.message)
  } finally {
    loading.value = false
  }
}

// 获取详情数据
const fetchDetail = async () => {
  if (!currentRecord.value) return
  console.log('当前页码：', detailParams.value.page)
  try {
    detailLoading.value = true
    const params = {
      page: detailParams.value.page,
      size: detailParams.value.size
    }
    console.log('当前页码：', params.page)
    const res = await getCrawlRecordDetail(currentRecord.value, params) // 修改为直接传入ID和params
    detailList.value = res.list
    detailTotal.value = res.total
  } catch (error) {
    ElMessage.error('获取详情失败: ' + error.message)
  } finally {
    detailLoading.value = false
  }
}

// 删除按钮事件
const deleteRecord = async (id) => {
  try {
    loading.value = true
    const res = await deleteImageRecordSrcUrl(id)
    ElMessage.success('删除成功')
    await fetchRecords()
  } catch (error) {
    ElMessage.error('删除失败: ' + error.message)
  } finally {
    loading.value = false
  }
}

// 查询按钮事件
const handleQuery = () => {
  fetchRecords()
}

// 行点击事件
const handleRowClick = (row) => {
  console.log('点击行：', row)
  showDetail(row.id)
}

// 显示详情弹窗
const showDetail = (id) => {
  currentRecord.value = id
  detailParams.value.page = 1
  detailVisible.value = true
  fetchDetail()
}

// 初始化加载数据
onMounted(() => {
  fetchRecords()
})
</script>

<style scoped>
.crawl-records-container {
  padding: 20px;
}

.search-card {
  margin-bottom: 20px;
}

.search-form {
  display: flex;
  align-items: center;
}

.table-card {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
}

.detail-container {
  max-height: 70vh;
  overflow-y: auto;
}

.el-table {
  margin-bottom: 20px;
}

.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #f5f7fa;
  cursor: pointer;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.image-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.image-meta {
  margin-top: 10px;
  width: 100%;
  font-size: 12px;
  line-height: 1.5;
}

.image-meta div {
  margin-bottom: 4px;
  word-break: break-all;
}
</style>